Ext.ns('Ext.home');

Ext.home.form = Ext.create('Ext.form.Panel', {
    title: 'Conditions',
    layout: {
    	type: 'table',
    	columns: 3
    },
    bodyPadding: '5 0 0 0',
    fieldDefaults: {
        baseCls: "x-plain",
        //labelAlign: "right",
        labelWidth: 70,
        labelSeparator: ':&nbsp;'
    },
    defaults: {
        xtype: "textfield",
        width: 200,
        margin: '0 10 5 0'
    },
    items: [{
    	fieldLabel: 'Text'
    }, {
    	xtype: 'numberfield',
    	fieldLabel: 'Number'
    }, {
    	xtype: 'button',
    	text: 'Search',
        iconCls: 'Search',
    	width: 80
    }, {
    	xtype: 'datefield',
    	fieldLabel: 'Date'
    }, {
    	xtype: 'combobox',
    	fieldLabel: 'Combo',
    	editable: false,
    	queryMode: 'local',
    	displayField: 'text',
    	valueField: 'value',
    	store: Ext.create('Ext.data.Store', {
    		fields: ['value', 'text'],
    		data: [
    		    {value: 0, text: 'Famale'},
    		    {value: 1, text: 'Male'}
    		]
    	})
    }, {
    	xtype: 'button',
    	text: 'Reset',
        iconCls: 'Spinner3',
    	width: 80,
    	handler: function() {
    		this.up('form').getForm().reset();
    	}
    }]
});

Ext.home.store = Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"},
        {'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234"},
        {'name': 'Homer', "email":"homer@simpsons.com",  "phone":"555-222-1244"},
        {'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});

Ext.home.grid = Ext.create('Ext.grid.Panel', {
    title: 'Results',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {text: 'Name',  dataIndex: 'name', width: '30%'},
        {text: 'Email', dataIndex: 'email', width: '30%'},
        {text: 'Phone', dataIndex: 'phone', flex: 1}
    ],
    height: 200,
    width: 400,
    tbar: [{
    	xtype: 'button',
    	text: 'Add',
    	iconCls: 'Add'
    }, {
    	xtype: 'button',
    	text: 'Update',
    	iconCls: 'Pencil'
    }, {
    	xtype: 'button',
    	text: 'Remove',
    	iconCls: 'Remove'
    }, '-', {
    	xtype: 'button',
    	text: 'Others'
    }],
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: Ext.home.store,
        dock: 'bottom',
        displayInfo: true
    }]
});

Ext.onReady(function() {
	Ext.create('TabContainer', {
		items: [
		    Ext.home.form,
		    Ext.home.grid
		],
		listeners: {
			resize: function(width, height) {
				Ext.home.form.setWidth(width);
				Ext.home.grid.setWidth(width);
				Ext.home.grid.setHeight(height - Ext.home.form.getHeight());
			}
		}
	});
});